<template>
  <a-card title="基本">
    <a-space>
      <view>
        <a-avatar title="Arco">A</a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :style="{ backgroundColor: '#3370ff' }">
          <a-icon name="dianpu"></a-icon>
        </a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :style="{ backgroundColor: '#14a9f8' }"
          >Arco</a-avatar
        >
      </view>
      <view>
        <a-avatar title="Arco" :style="{ backgroundColor: '#00d0b6' }"
          >Design</a-avatar
        >
      </view>
      <view>
        <a-avatar
          image-url="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
        >
        </a-avatar>
      </view>
    </a-space>
  </a-card>
  <a-card title="大小和形状">
    <a-space>
      <view>
        <a-avatar title="Arco" :size="64">Arco</a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :size="40">Arco</a-avatar>
        <a-avatar title="Arco" :size="40">Arco</a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :size="32">Arco</a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :size="24">Arco</a-avatar>
      </view>
    </a-space>
    <a-space size="large">
      <view>
        <a-avatar title="Arco" :size="64" shape="square">Arco</a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :size="40" shape="square">Arco</a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :size="32" shape="square">Arco</a-avatar>
      </view>
      <view>
        <a-avatar title="Arco" :size="24" shape="square"></a-avatar>
      </view>
    </a-space>
  </a-card>
  <a-card title="自动调整字体大小">
    <a-space size="large">
      <a-avatar
        :title="text"
        :style="{
          marginRight: '24px',
          verticalAlign: 'middle',
          backgroundColor: '#14a9f8',
        }"
      >
      </a-avatar>
      <a-button
        type="secondary"
        :style="{ verticalAlign: 'middle' }"
        @click="onClick"
      >
        Change
      </a-button>
    </a-space>
  </a-card>
  <a-card title="自动调整字体大小">
    <a-space size="large">
      <a-avatar
        image-url="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      >
      </a-avatar>
      <view>
        加载失败:
        <a-avatar
          image-url="https://p1-arco.byteimg.com/toscn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9123.png~tplv-uwbnlip3yd-webp.webp"
        >
        </a-avatar>
      </view>
    </a-space>
  </a-card>
</template>

<script>
import { computed, ref } from "vue";

const list = ["B", "Arco", "Design", "Tom", "AD"];
export default {
  setup() {
    const index = ref(0);
    const text = computed(() => list[index.value]);

    const onClick = () => {
      index.value = index.value >= list.length - 1 ? 0 : index.value + 1;
    };

    return {
      text,
      onClick,
    };
  },
};
</script>
